<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/site.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/script.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
	
	$(document).ready(function() {
		//<!-- Real-time Validation -->
		//<!--Username Name can't be blank-->
			var input = $('#login_name');
			var is_name = input.val();
			if (is_name) {
				input.removeClass("invalid").addClass("valid");
			} else {
				input.removeClass("valid").addClass("invalid");
			}

		$('#login_name').on('input', function() {
			var input = $(this);
			var is_name = input.val();
			if (is_name) {
				input.removeClass("invalid").addClass("valid");
			} else {
				input.removeClass("valid").addClass("invalid");
			}
		});	
			
		$('#login_password').on('input', function() {
			var input = $(this);
			var is_name = input.val();
			if (is_name) {
				input.removeClass("invalid").addClass("valid");
			} else {
				input.removeClass("valid").addClass("invalid");
			}
		});

		$("#login_submit").click(function(event) {
			var form_data = $("#login").serializeArray();
			var error_free = true;
			for ( var input in form_data) {
				if(input != 2){
					var element = $("#login_" + form_data[input]['name']);
					var valid = element.hasClass("valid");
					var error_element = $("span", element.parent());
					if (!valid) {
						error_element.removeClass("error").addClass("error_show");
						error_free = false;
					} else {
						error_element.removeClass("error_show").addClass("error");
					}
				}
			}
			if (!error_free) {
				event.preventDefault();
			}

		});

	});
</script>

<style>
#login label {
	display: inline-block;
	width: 100px;
	text-align: right;
}

#login_submit {
	padding-left: 100px;
}

#login div {
	margin-top: 1em;
}

textarea {
	vertical-align: top;
	height: 5em;
}

.error {
	display: none;
	margin-left: 10px;
}

.error_show {
	color: red;
	margin-left: 10px;
}
</style>
</head>
<body>
	<div><%@include file="/WEB-INF/header.jsp"%></div>
	<div class="content-wrapper">
		<div id="body" style="background:;">
			<section class="container">
				<div class="login">
					<h1>Login to Web App</h1>
					<form name="login" id="login" method="post" action="Login"
						onsubmit="return validateForm()">
						<div>
							<p>
								<input type="text" id="login_name" name="name"
									value="${cookie.remember.value}" placeholder="Username">
								<span class="error"> Username is required </span>
							</p>

						</div>

						<!-- password -->
						<div>
							<p>
								<input type="password" id="login_password" name="password"
									value="" placeholder="Password"> <span class="error">Password
									is required</span>
							</p>
						</div>

						<p class="remember_me">
							<label> <input type="checkbox" name="remember_me"
								id="remember_me"> Remember me
							</label>
						</p>
						<div id="login_submit">
							<p class="submit">
								<input class="button" type="submit" name="commit" value="Login">
							</p>
						</div>
					</form>
					<br>
					<c:if test="${not empty requestScope.loginError}">
  						<span id="loginError" style="color: #FF0000"> <c:out value="${requestScope.loginError}" /></span>
					</c:if>
				</div>

				<div class="login-help">
					<p>
						New User? <a href="Registration.jsp"> Click here to register</a>
					</p>
				</div>
			</section>
		</div>
	</div>
</body>
</html>